<template>
  <div
    v-loading="isLoading"
    class="panel-property"
  >
    <div class="content">
      <PanelLabelOverflowTooltip
        ref="panelLabelOverflowTooltip"
        :component-style="form.componentStyle"
      />
      <div class="helptip_line">
        <span class="helptip_label">{{ $demoi18n('win-container.specialInstructions') }}</span>
        <Helptip tip-key="winContainer.helptip"></Helptip>
      </div>
      <el-form
        ref="form"
        v-panel-label-overflow-tooltip="getPanelLabelOverflowTooltip()"
        class="prop-form"
        label-position="right"
        :model="form"
        :rules="rules"
        label-width="30%"
        style="padding: 0 10px"
      >
        <BaseOption
          :form="form"
          option="componentStyle"
        />
        <VsFormItem :label="$demoi18n('win-container.positionOfTheDialogBox')">
          <el-select
            v-model="form.winLocation"
            size="default"
          >
            <el-option
              v-for="(item, index) in winLocationOption"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </VsFormItem>
        <OptionCollapse>
          <el-collapse-item
            :title="$demoi18n('panel.label.titleStyle')"
            name="cssStyle.title"
          >
            <BaseOption
              :form="form"
              option="title"
            />
            <BaseOption
              :form="form"
              option="cssStyle.title"
              :df-css-style-attrs="dfCssStyleAttrs.title"
              :hidden-fields="hiddenFields"
            />
            <BaseOption :form="form" option="isTitleSignVisiable" />
            <BaseOption v-if="form.isTitleSignVisiable" :form="form" option="signMarginLeft" />
            <BaseOption v-if="form.isTitleSignVisiable" :form="form" option="verticalLineBackgroundColor" />
          </el-collapse-item>
          <el-collapse-item
            v-if="isPage"
            :title="$demoi18n('word.pageSetting')"
            name="pageSetting"
          >
            <VsFormItem
              v-if="!isAurora"
              :label="$demoi18n('word.site')"
              prop="siteId"
            >
              <el-select
                v-model="form.siteId"
                :class="`panel-data-select-${xvueTheme}`"
                :popper-class="`select-poper-${xvueTheme}`"
                size="default"
                style="width:90%;"
                fit-input-width
                @change="siteChange"
              >
                <el-option
                  v-for="site in siteList"
                  :key="site.applicationUuid"
                  :label="site.name"
                  :value="site.applicationUuid"
                ></el-option>
              </el-select>
            </VsFormItem>
            <VsFormItem
              :label="$demoi18n('word.catalog')"
              prop="directoryId"
            >
              <el-select
                v-model="form.directoryId"
                :class="`panel-data-select-${xvueTheme}`"
                :popper-class="`select-poper-${xvueTheme}`"
                size="default"
                style="width:90%;"
                fit-input-width
                @change="directoryChange"
              >
                <el-option
                  v-for="directory in directoryList"
                  :key="directory.uuid"
                  :label="directory.directoryName"
                  :value="directory.uuid"
                ></el-option>
              </el-select>
            </VsFormItem>
            <VsFormItem
              :label="$demoi18n('word.page')"
              prop="pageId"
            >
              <el-select
                v-model="form.pageId"
                :class="`panel-data-select-${xvueTheme}`"
                :popper-class="`select-poper-${xvueTheme}`"
                size="default"
                style="width:90%;"
                fit-input-width
                @change="pageChange"
              >
                <el-option
                  v-for="page in newPageList"
                  :key="page.uuid"
                  :label="page.pageName"
                  :value="page.uuid"
                ></el-option>
              </el-select>
            </VsFormItem>
          </el-collapse-item>
          <el-collapse-item
            :title="$demoi18n('dialog.dlgSetting')"
            name="dlgSetting"
          >
            <VsFormItem :label="$demoi18n('dialog.enableMask')" :helptip="$demoi18n('win-container.enableMaskHelptip')">
              <el-radio-group v-model="form.mask">
                <el-radio :label="1">{{ $demoi18n('word.yes') }}</el-radio>
                <el-radio :label="0">{{ $demoi18n('word.no') }}</el-radio>
              </el-radio-group>
            </VsFormItem>
            <VsFormItem :label="$demoi18n('dialog.enabAnimation')" :helptip="$demoi18n('dialog.enabAnimationTip')">
              <el-radio-group v-model="form.dlgAnimation">
                <el-radio :label="1">{{ $demoi18n('word.yes') }}</el-radio>
                <el-radio :label="0">{{ $demoi18n('word.no') }}</el-radio>
              </el-radio-group>
            </VsFormItem>
            <VsFormItem :label="$demoi18n('win-container.eventControlStatusLabel')" :helptip="$demoi18n('win-container.eventControlStatusLabelTip')">
              <el-switch v-model="form.eventControlStatus"></el-switch>
            </VsFormItem>
            <VsFormItem
              v-if="form.eventControlStatus"
              :label="$demoi18n('win-container.openParamsListLabel')"
              :helptip="$demoi18n('win-container.openParamsListLabelTip')"
            >
              <ValueInputer
                v-model:value="form.openStatusParams"
                valueType="Input"
                :placeholder="$demoi18n('win-container.closeParamsListPlaceholder')"
              />
            </VsFormItem>
            <VsFormItem
              v-if="form.eventControlStatus"
              :label="$demoi18n('win-container.closeParamsListLabel')"
              :helptip="$demoi18n('win-container.openParamsListLabelTip')"
            >
              <ValueInputer
                v-model:value="form.closeStatusParams"
                valueType="Input"
                :placeholder="$demoi18n('win-container.closeParamsListPlaceholder')"
              />
            </VsFormItem>
          </el-collapse-item>
        </OptionCollapse>
      </el-form>
    </div>
    <PanelPropertyBottom :config="config" :widgetInstanceId="widgetInstanceId" :form="form" />
  </div>
</template>
<script>
import BaseOption from '@/components/common/base-option/base-option.vue';
import OptionCollapse from '@/components/common/base-option/option-collapse/option-collapse.vue';
import Helptip from '@/components/common/helptip/helptip.vue';
import PanelLabelOverflowTooltip from '@/components/common/overflow-tooltip/overflow-tooltip.vue';
import ValueInputer from '@/components/common/value-inputer/value-inputer.vue';
import jumpUrlBase from '@/mixin/jump-url-base';
import panelPropertyBase from '@/mixin/panel-property-base.js';
import dataModel from '@/models/panel-config-data.js';
import dfCssStyleAttrs from './cssStyle-default.js';

export default {
  name: 'PanelProperty',
  components: {
    BaseOption,
    OptionCollapse,
    PanelLabelOverflowTooltip,
    Helptip,
    ValueInputer,
  },
  mixins: [panelPropertyBase, jumpUrlBase],
  props: ['config', 'widgetInstanceId', 'widget', 'isPage', 'isAurora'],
  data() {
    return {
      isLoading: false,
      form: {},
      dfCssStyleAttrs,
      hiddenFields: [],
      winLocationOption: [
        {
          label: this.$demoi18n('option.align.center'),
          value: 'winCenter',
        },
        {
          label: this.$demoi18n('win-container.upperLeftCorner'),
          value: 'winLeftTop',
        },
        {
          label: this.$demoi18n('win-container.lowerLeftCorner'),
          value: 'winLeftDown',
        },
        {
          label: this.$demoi18n('win-container.topRightCorner'),
          value: 'winRightTop',
        },
        {
          label: this.$demoi18n('win-container.lowerRightCorner'),
          value: 'winRightDown',
        },
      ],
    };
  },
  computed: {
    newPageList() {
      const { pageId } = this.$route.params;
      return this.pageList.filter(page => page.uuid !== pageId);
    },
  },
  created() {
    // 读取配置
    if (this.config) {
      this.form = JSON.parse(JSON.stringify(this.config.config.property));
    }
    this.getSiteListNew();
  },
  methods: {
    getSiteListNew() {
      dataModel['getSiteListNew']()
        .then(list => {
          const { params: { siteId } = {} } = this.$route || {};
          if (this.form.linkType === 'page') {
            const currSite = (this.isAurora || window.isLocalEnv) ?
              list[0] :
              list.find(site => site.applicationUuid === siteId);
            if (currSite) {
              this.siteList = [currSite];
              this.getSiteSingle(currSite.applicationUuid);
            } else {
              this.form.siteId = '';
              this.form.directoryId = '';
              this.form.pageId = '';
              this.form.jumpUrl = '';
            }
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
@import '../common/less/panel-property.less';
</style>
<style lang="less" scoped>
.panel-property {
  .helptip_line {
    display: flex;
    padding: 10px 10px 10px 25px;
    .helptip_label {
      line-height: 1;
    }
  }
}
.dark {
  .helptip_line {
    color: #fff;
  }
}
</style>
